<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="tab-container">
          <div class="con-title">小休基本信息</div>
          <el-form
            style="width: 78%; margin-left: 60px"
            ref="ruleForm1"
            :model="infoForm"
            :rules="addrules"
            label-width="100px"
            autocomplete="off"
          >
            <el-form-item label="小休名称">
              <el-input
                style="width: 40%"
                size="small"
                maxlength="16"
                :disabled="!viewShow"
                placeholder="请输入小休名称"
                v-model="infoForm.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="小休排序">
              <el-input
                style="width: 40%"
                size="small"
                maxlength="16"
                :disabled="!viewShow"
                placeholder="请输入小休排序"
                v-model="infoForm.sort"
              ></el-input>
            </el-form-item>
            <el-form-item label="小休说明">
              <el-input
                style="width: 40%"
                type="textarea"
                size="small"
                :disabled="!viewShow"
                placeholder="请输入小休说明"
                v-model="infoForm.remark"
              ></el-input>
            </el-form-item>
          </el-form>

          <div style="width: 78%; margin-left: 70px">
            <el-button
              size="mini"
              v-if="type == '2'"
              type="default"
              @click="cancel()"
              >返回</el-button
            >
            <el-button size="mini" v-else type="default" @click="cancel()"
              >取消</el-button
            >
            <el-button
              size="mini"
              type="primary"
              v-if="viewShow"
              @click="saveAdd()"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MD5 from "js-md5";
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchAdd,
  fetchGetData,
  fetchDetail,
} from "@/api/systemapi/restmanage.js";
export default {
  components: {
    HeaderTitle,
  },
  data() {
    var checkusername = (rule, value, callback) => {
      var res = /^[a-zA-Z0-9]/;
      if (!value) {
        return callback(new Error("登陆账号不能为空"));
      } else if (!res.test(value)) {
        return callback(new Error("登陆账号不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    return {
      entNum: "",
      titleList: [{ title: "小休管理" }, { title: "新增小休" }],
      organprops: {
        label: "name",
        children: "children",
        value: "id",
        checkStrictly: true,
      },
      type: "", //查看编辑新增
      addRelated: true, // add相关控件隐藏显示
      viewShow: true, // 查看展示
      editid: "", // id
      treeData: null,
      infoForm: {
        name: "", // 视讯号码
        remark: "", // 密码
        sort: ""
      },
      addrules: {
      //   videoNum: [
      //     { required: true, validator: checkusername, trigger: "blur" },
      //     {
      //       min: 4,
      //       max: 20,
      //       message: "长度在 4 到 20 个字符",
      //       trigger: "blur",
      //     },
      //   ],
      //   password: [
      //     { required: true, message: "登录密码不能为空", trigger: "blur" },
      //     {
      //       min: 6,
      //       max: 16,
      //       message: "长度在 6 到 16 个字符",
      //       trigger: "blur",
      //     },
      //   ],
      },
      ccodShow: false,
      zsAudioStatus: "",
    };
  },
  mounted() {
    const { entNum } = this.$route.query;
    this.entNum = entNum;
    this.type = this.$route.query.type;
    if (this.type == "2") {
      this.titleList[1].title = "查看小休";
      this.viewShow = false;
      this.getEditData(this.$route.query.id);
    }
  },
  methods: {
    cancel() {
      this.$router.push({
        name: "restmanage",
        params: { entNum: this.entNum },
      });
    },
    getEditData(id) {
      fetchDetail({ id: id }).then((res) => {
        this.infoForm = res.data;
      });
    },
    saveAdd() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs["ruleForm1"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
      Promise.all([p1]).then(() => {
        fetchAdd({ ...this.infoForm }).then((response) => {
          if (response.code == 0) {
            this.cancel();
          } else {
            this.$message({
              type: "error",
              message: response.msg,
            });
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .tab-container {
        width: 100%;
        margin-top: 15px;
        .con-title {
          margin-bottom: 15px;
          font-size: 14px;
          color: #666;
          font-weight: bold;
          margin-left: 10px;
        }
        .elform-item {
          display: flex;
          .item {
            width: 40%;
            margin-right: 20px;
          }
          .item-span {
            color: #ccc;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
